<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回收站管理</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
</head>

<body>
    <div style="padding: 15px;margin: 15px;background-color: #fff;">
        <!-- 搜索表单 -->
        <div class="layui-form" style="border-bottom:1px solid #f6f6f6">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" value="" placeholder="文件名" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline">
                        <select name="cat">
                            <option value=""></option>
                            {foreach $cates as $cate}
                            <option value="{$cate['id']}">{$cate['name']|raw}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" lay-submit lay-filter="search" class="layui-btn"><i
                            class="layui-icon layui-icon-search"></i></button>
                </div>
            </div>
        </div>

        <!-- 数据表格 -->
        <table class="layui-table" lay-filter="dataTable"
            lay-data="{'url':'/admins/article/recycle', where:{search: ''}, id: 'dataTable', toolbar: '#toolbar', page:true}">
            <thead>
                <tr>
                    <th lay-data="{checkbox:true, fixed: 'left'}"></th>
                    <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                    <th lay-data="{field:'title'}">标题</th>
                    <th lay-data="{field:'preview', sort: true}">缩略图</th>
                    <th lay-data="{field:'cat_name'}">分类</th>
                    <th lay-data="{field:'views', edit: false, sort: true}">阅读</th>
                    <th lay-data="{field:'hot', sort: true, templet:'#hotTpl', width: 80}">热门</th>
                    <th lay-data="{field:'status', sort: true, templet:'#statusTpl', width: 95}">状态</th>
                    <th lay-data="{field:'date'}">日期</th>
                    <th lay-data="{width:120, align:'center', toolbar: '#databar'}">操作</th>
                </tr>
            </thead>
        </table>

        <!-- 头工具栏 -->
        <script type="text/html" id="toolbar">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" lay-event="delAll">批量删除</button>
                <button class="layui-btn layui-btn-sm" lay-event="restoreAll">批量还原</button>
                <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh"></i></button>
            </div>
        </script>

        <!-- 行工具 -->
        <script type="text/html" id="databar">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="restore">还原</a>
        </script>

        <!-- 单元格热门 -->
        <script type="text/html" id="hotTpl">
            {{# if(d.hot == 1){ }}<span style="color: green;">开</span>{{# }else{ }}<span style="color: red;">关</span>{{# } }}
        </script>

        <!-- 单元格状态 -->
        <script type="text/html" id="statusTpl">
            {{# if(d.status == 0){ }}<span style="color: green;">启用</span>{{# }else{ }}<span style="color: red;">禁用</span>{{# } }}
        </script>

    </div>

    <!-- js -->
    <script>
        layui.use(['table', 'form'], function () {
            var table = layui.table,
                upload = layui.upload,
                form = layui.form,
                $ = layui.jquery;

            // 获取应用、控制器和方法
            var module = '{:app("http")->getName()}'
                , controller = '{$Request.controller}'
                , action = '{$Request.action}';

            // 头工具栏事件
            table.on('toolbar(dataTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;

                // 头工具栏批量删除
                if (obj.event === 'delAll') {
                    if (data.length === 0) {
                        return layer.msg('请选择数据');
                    }
                    layer.confirm('确定删除吗？', { icon: 3 }, function (index) {
                        var ids = [];
                        data.forEach(elem => { ids.push(elem.id); });
                        $.post('/' + module + '/' + controller + '/recycle_del', { id: ids }, function (res) {
                            if (res.code) return layer.msg(res.msg, { icon: 2 });
                            layer.msg(res.msg);
                            table.reload(obj.config.id);
                        }, 'json');
                    });
                }

                // 头工具批量还原
                if (obj.event === 'restoreAll') {
                    if (data.length === 0) {
                        return layer.msg('请选择数据');
                    }
                    layer.confirm('确定还原吗？', { icon: 3 }, function (index) {
                        var ids = [];
                        data.forEach(elem => { ids.push(elem.id); });
                        $.post('/' + module + '/' + controller + '/recycle_restore', { id: ids }, function (res) {
                            if (res.code) return layer.msg(res.msg, { icon: 2 });
                            layer.msg(res.msg);
                            table.reload(obj.config.id);
                        }, 'json');
                    });
                }

                // 头工具栏刷新
                if (obj.event === 'refresh') {
                    table.reload(obj.config.id);
                }

            });

            // 监听行工具事件
            table.on('tool(dataTable)', function (obj) {
                var data = obj.data;

                // 行工具删除行
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么？', { icon: 3 }, function (index) {
                        layer.close(index);
                        $.post('/' + module + '/' + controller + '/recycle_del', { id: data.id }, function (res) {
                            if (res.code) return layer.msg(res.msg, { icon: 2 });
                            obj.del();
                            layer.msg(res.msg);
                        }, 'json');
                    });
                }

                // 行工具还原
                if (obj.event === 'restore') {
                    layer.confirm('确定还原文章？', { icon: 3 }, function (index) {
                        layer.close(index);
                        $.post('/' + module + '/' + controller + '/recycle_restore', { id: data.id }, function (res) {
                            if (res.code) return layer.msg(res.msg, { icon: 2 });
                            layer.msg(res.msg);
                            table.reload('dataTable');
                        }, 'json');
                    });
                }

            });

            // 监听表单搜索框事件
            form.on('submit(search)', function (obj) {
                var field = obj.field;
                // 数据表格重载
                table.reload('dataTable', { where: { search: field } });
                return false;
            });

        });
    </script>

</body>

</html>